<template>
  <!-- 主机查看详情对话框 -->
  <el-dialog
    title="Webshell"
    :visible.sync="webshellVisible"
    width="737px"
    @open="open()"
    @opened="opened()"
    :before-close="closeDialog"
  >
    <span class="main">
      <div id="terminal"></div>
      <el-button @click="fullscreen">全屏</el-button>
    </span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <!-- <el-button @click="showEdit = true">编 辑</el-button> -->
      <el-button type="primary" @click="closeDialog">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import "xterm/dist/xterm.css";
import { Terminal } from "xterm";
import * as attach from "xterm-addon-attach";
import * as fullscreen from "xterm-addon-fullscreen";
import * as fit from "xterm-addon-fit";
export default {
  props: ["webshellVisible", "webshellRow"],
  data() {
    return {
      term: null,
      terminalSocket: null,
      order: "",
    };
  },

  methods: {
    open() {},
    opened() {
      console.log(this.term);
      if (this.term) {
        this.term.dispose();
      }
      //实例化一个websocket，用于和django江湖
      this.terminalSocket = new WebSocket(
        "ws://8.218.222.193:8000/api/echo_once/" +
          this.$route.query.ip +
          "/" +
          this.$route.query.username +
          "/" +
          this.$route.query.password
      );
      //获取到后端传回的信息
      this.terminalSocket.onmessage = (res) => {
        console.log(res.data);
        // var message = JSON.parse(res.data);
        //将传回来的数据显示在xterm里
        this.term.writeln("\r\n" + res.data);
        //重置要发送的信息
        this.order = "";
        //换行，显示下一个开头
        this.term.write("\r\n$ ");
      };

      // ws连接成功的时候
      this.terminalSocket.onopen = () => {
        this.terminalSocket.send("/0");
        //在xterm上显示命令行提示
        this.term.write("\r\n");
        this.term.write("Connecting to " + this.$route.query.ip + " ...");
        this.term.write("\r\nConnecting established");
        this.term.write("\r\n");
        this.term.write("\r\n$ ");
        console.log("websocket is Connected...");
      };

      // ws关闭的时候
      // ws关闭的时候  readyState 变为 CLOSED时被调用
      this.terminalSocket.onclose = () => {
        console.log("websocket is Closed...");
      };
      // ws错误的时候
      this.terminalSocket.onerror = () => {
        this.term.write("\r\nConnecting failure");
        console.log("damn Websocket is broken!");
      };
      // this.term.attach(this.terminalSocket);
      // let fitAddon = new FitAddon();
      // term.loadAddon(fitAddon);
      // fitAddon.fit();

      // console.log(fitAddon);
      // 绑定xterm到ws流中 },
      let terminalContainer = document.getElementById("terminal");
      console.log(terminalContainer);
      //创建xterm实例
      this.term = new Terminal({
        cols: 90, // 列数
        rows: 48, // 行数
        cursorBlink: true, // 显示光标
        cursorStyle: "underline", // 光标样式
      }); // 创建一个新的Terminal对象
      console.log(this.term);
      this.term.open(terminalContainer); // 将term挂载到dom节点上

      //在xterm上显示命令行提示
      this.term.focus(); // 获得焦点
      console.log(this.term.scroll);
      //监听xterm的键盘事件
      this.term.on("key", (key, ev) => {
        // key是输入的字符 ev是键盘按键事件
        console.log("key==========", ev.keyCode);
        this.term.write(key); // 将输入的字符打印到黑板中
        switch (ev.keyCode) {
          case 13:
            // 按下回车
            this.order = this.order + "/1";
            //使用webscoket将数据发送到django
            this.terminalSocket.send(this.order);
            break;
          case 8:
            //删除按钮
            console.log(this.order);
            //截取字符串[0,lenth-1]
            this.order = this.order.substr(0, this.order.length - 1);
            //清空当前一条的命令
            this.term.write("\x1b[2K\r");
            //简化当前的新的命令显示上
            this.term.write("$ " + this.order);
            typeof this.order;
            break;
          default:
            console.log(ev.keyCode);
            this.order += key;
            break;
        }
      });
    },
    methods: {
      fullscreen() {
        this.term.fullscreen.toggleFullScreen();
      },
      // 关闭弹出框
      closeDialog() {
        this.$emit("closeDialog");
      },
    },
  },
};
</script>

<style lang='less' scoped>
#terminal {
  width: 100%;
  height: 400px;
  //   margin: -20px -20px 0 -20px;
}
</style>